import { editPhotoAction, editProfileAction } from '@/store/actions/profile'
import { Popup, Toast } from 'antd-mobile'
import { useRef } from 'react'
import { useDispatch } from 'react-redux'
import styles from './index.module.scss'

export type ListPopType = {
  visible: boolean
  close: () => void
  type: 'gender' | 'photo'
}

// 定义性别的 列表 便于界面生成
const genderArr = [
  {
    text: '男',
    value: '0',
  },
  {
    text: '女',
    value: '1',
  },
]

const ListPop = ({ visible, close, type }: ListPopType) => {
  const dispatch = useDispatch()
  // input的ref
  const fileRef = useRef<HTMLInputElement>(null)
  // 更新用户性别
  const editGender = async (gender: string) => {
    // 触发更新用户性别的action
    await dispatch(editProfileAction('gender', gender))
    Toast.show({
      icon: 'success',
      content: '性别更新成功!',
    })
    close()
  }

  // 弹出文件选择框
  const showFileSelect = () => {
    fileRef.current?.click()
  }
  // 选取了文件之后的回调函数
  const fileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    // 文件
    // 实例化FormData
    const formData = new FormData()
    // append数据进去 无法直接在控制台通过FormData看到
    formData.append('photo', e.target!.files![0])
    // 需要调用get方法才可以看到
    // 触发action
    await dispatch(editPhotoAction(formData))
    // 提示用户
    Toast.show({
      icon: 'success',
      content: '头像更新完毕',
    })
    // 关闭弹框
    close()
  }

  return (
    <Popup onMaskClick={close} visible={visible} position='bottom'>
      {/* 藏一个file选择标签 hidden 隐藏域 */}
      <input onChange={fileChange} type='file' ref={fileRef} hidden />
      <div className={styles.root}>
        {/* 头像 */}
        {type === 'photo' && (
          <div>
            <div onClick={showFileSelect} className='list-item'>
              拍照
            </div>
            <div onClick={showFileSelect} className='list-item'>
              本地选择
            </div>
          </div>
        )}

        {/* 性别 */}
        {type === 'gender' &&
          genderArr.map((v) => {
            return (
              <div
                key={v.value}
                onClick={() => {
                  editGender(v.value)
                }}
                className='list-item'
              >
                {v.text}
              </div>
            )
          })}

        {/* 取消 */}
        <div onClick={close} className='list-item bottom'>
          取消
        </div>
      </div>
    </Popup>
  )
}

export default ListPop
